<template>
  <div class="scroll-box card-box">
    <div class="pane-shell">
      <div style="margin-bottom: 20px; font-weight: bold;">总余额：{{remainingSum}}</div>
      <el-form
        :inline="true"
        @submit.native.prevent
        :model="dataForm"
        ref="dataForm"
        @keyup.enter.native="search"
      >
        <el-form-item>
          <el-select
            v-model="dataForm.type"
            placeholder="选择类型"
            clearable
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="date"
            @change="changeDatePicker"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="search"
          >{{ $t('query') }}</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
        @sort-change="dataListSortChangeHandle"
        style="width: 100%;"
      >
        <el-table-column
          type="index"
          label="序号"
          header-align="center"
          align="center"
          width="50"
        >
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          show-overflow-tooltip
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.type === 0">充值</span>
            <span v-if="scope.row.type === 1">餐饮缴费</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createDate"
          label="时间"
          show-overflow-tooltip
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="moneyStr"
          label="金额"
          show-overflow-tooltip
          header-align="center"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注"
          show-overflow-tooltip
          header-align="center"
          align="center"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :total="total"
        layout="total, sizes, prev, pager, next"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import mixinViewModule from "@/mixins/view-module";
import formValidate from "@/mixins/form-validate";
import tableTemplate from "@/components/table-template";
export default {
  mixins: [mixinViewModule, formValidate],
  data() {
    return {
      isAdd: true,
      isDisabled: true,
      user: {},
      mixinViewModuleOptions: {
        getDataListURL: "/tb/walletDetail/getWalletDetail?walletType=0",
        getDataListIsPage: true,
      },
      remainingSum: "",
      dataList: [],
      statusOptions: [
        {
          label: "充值",
          value: 0,
        },
        {
          label: "餐饮缴费",
          value: 1,
        },
      ],
      date: "",
      total: 0,
      dataForm: {
        type: "",
        startTime: "",
        endTime: "",
      },
    };
  },
  mounted() {
    this.getDataList();
    this.getBalance();
    // this.getBalanceDetails()
  },
  components: {
    tableTemplate,
  },
  computed: {},
  methods: {
    /**
     * 时间格式转换
     */
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? "0" + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1;
      let date =
        new Date(timeStamp).getDate() < 10
          ? "0" + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate();
      return year + "-" + month + "-" + date;
    },
    changeDatePicker(val) {
      if (val) {
        this.dataForm.startTime = this.timeFormate(val[0]);
        this.dataForm.endTime = this.timeFormate(val[1]);
      } else {
        this.dataForm.startTime = "";
        this.dataForm.endTime = "";
      }
    },
    // 获取余额
    getBalance() {
      this.$http
        .get("/tb/companyWallet/getCompanyWallet")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return;
          }
          this.remainingSum = res.data.remainingSum;
        });
    },
    // 获取余额明细
    getBalanceDetails() {
      this.$http
        .get("/tb/walletDetail/getWalletDetail?walletType=0")
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return;
          }
          console.log(res.data);
          this.dataList = res.data.data;
          this.total = res.data.total;
        });
    },
    // 查询
    search() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.getPageInit();
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.user-dialog {
  background: rgba(0, 0, 0, 0.5);
}
.download {
  text-decoration: none;
  color: #fff;
}
.tree-input {
  width: 100%;
  position: relative;
  .close {
    position: absolute;
    right: 10px;
    top: 13px;
    font-size: 16px;
    color: #858585;
    cursor: pointer;
    background-color: white;
  }
}
.addBtn {
  ::v-deep .el-form-item__content {
    display: flex;
    .user-switch {
      display: flex;
      align-items: center;
      margin-right: 15px;
      .message-title {
        margin-right: 10px;
      }
    }
  }
}
.card-box {
  padding: 0 !important;
}
.el-pagination {
  text-align: right;
  margin-top: 15px;
}
</style>
